/* Basic reset and body styles */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Garamond, serif;
}

/* Common styles for parallax sections */
.parallax {
    background-attachment: fixed; /* This is the key for parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh; /* Make parallax sections fill the viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 3em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Specific background images for each parallax section */
.parallax-one {
    background-image: url('/dnd worlds/Jupiter City Heroes/JupiterImages/JupiterCity.jpg'); /* Replace with your image path */
}

.parallax-two {
    background-image: url('/dnd worlds/Jupiter City Heroes/JupiterImages/JupiterCity.jpg'); /* Replace with your image path */
}
.column {
  float: left;
  text-align: center;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Styles for regular content sections */
.section {
    padding: 50px 20px;
    background-color: #f4f4f4;
    text-align: center;
    color: #333;
}

/* Styles for text within parallax sections */
.parallax .text {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
}

img {
  width: 100%; /* Sets a fixed width */
  height: auto; /* Adjusts height proportionally */
}